<template>
	<view class="container">
		<u-form :model="form" ref="uForm" class="form">
			<u-sticky>
			<view class="weui-form">
				<view class="weui-form__control-area">
					<u-subsection class="noticeCate" :list="showCateList" :current="currentCate" font-size="24"
						@change="changeCate" active-color="#ff9900"></u-subsection>
				</view>
			</view>
			</u-sticky>

			<view class="charge-time">
				<view class="item">
					<view class="time"></view>
					<view class="name">
						AI金字塔
						</view>
					<view class="desc">低买高卖</view>
				</view>
				<view class="item">
					<view class="time"></view>
					<view class="name">
						智能高频
						</view>
					<view class="desc">低买高卖</view>
				</view>
				<view class="item selected">
					<view class="time"></view>
					<view class="name">
						现货网络
						</view>
					<view class="desc">低买高卖</view>
				</view>
			</view>


			<!-- 支付方式 -->
			<view class="charge-method">
				<text class="left">支付方式</text>
				<text class="right">USDT转账</text>
			</view>

			<!-- 开通时间 -->
			<view class="charge-time">
				<view class="item">
					<view class="time">1个月</view>
					<view class="money">
						70
						<text>USDT</text>
						</view>
					<view class="desc">折合2.33USDT/天</view>
				</view>
				<view class="item">
					<view class="time">1个月</view>
					<view class="money">
						70
						<text>USDT</text>
						</view>
					<view class="desc">折合2.33USDT/天</view>
				</view>
				<view class="item selected">
					<view class="time">1个月</view>
					<view class="money">
						70
						<text>USDT</text>
						</view>
					<view class="desc">折合2.33USDT/天</view>
				</view>
				<view class="item" @click="showKeFu">
					<view class="time"></view>
					<view class="money">
						联系客服
						</view>
					<view class="desc"></view>
				</view>
			</view>

			<view class="charge-bottom">
				<view class="left">
					<text class="title">支付金额:</text>
					<text class="money">700</text>
					<text class="unit">USDT</text>
				</view>
				<view class="right">
					<text @click="submit">立即开通</text>
				</view>
			</view>

		</u-form>
		<!-- <u-modal v-model="show" :content="content" show-cancel-button @confirm="confirm" @cancel="cancel"></u-modal> -->

		<u-popup v-model="show" mode="center">
			<view class="charge">
				<view class="item">
					<text>充值金额</text>
					<input :disabled="true" class="uni-h6 m-input" type="text" value="188USTD"
						style="color:#ff9900; font-weight:700;width:600rpx" />
				</view>
				<view class="item">
					<text>充值地址:</text>
					<input :disabled="true" class="uni-h6 m-input" type="text" :value="chargeAddress"
						style="color:#ff9900; font-weight:700;width:600rpx" />

				</view>

				<view class="item">
					<text>充值须知:</text>
					<u-input :disabled="true" class="uni-h8 m-input" type="textarea" :value="chargeInfo"
						style="color:#ff9900; width:600rpx;height:200rpx;font-size:24rpx" />

				</view>
				<view class="item btn">
					<u-button @click="copyKefu(chargeAddress)" type="warning" size="mini">复制</u-button>
				</view>


			</view>
		</u-popup>
		<kefu-popup :showKefu="showKefu" @closePopup="closePopup"></kefu-popup>
	</view>
</template>

<script>
	import kefuPopup from '@/components/kefu-popup/index'
	export default {
		data() {
			return {
				showKefu: false,
				//分段器
				showCateList: [{
					name: "火币"
				}, {
					name: "币安"
				}],
				currentCate: 0,
				chargeAddress: "TJSYxvwGFMUC4p43AdQLCddvW5AqPJbxKn",
				chargeInfo: "如出现支付成功但话费未到账等异常情况，系统每30分钟会自动补缴一次，您可在次日11点之前随时查看补缴到账情况，同时补缴成功后订单状态会自动更新。 ",
				// 确认充值
				show: false,
				content: "确认充值",
				form: {
					market: "",
					method: "",
					capital: "",
					time: "",
				},
				// form 样式
				labelStyle: {
					width: "180rpx",
					marginRight: "30rpx",
					color: "aliceblue",
				},
				// input 样式
				fieldStyle: {
					width: "300rpx",
					height: "80rpx",
					padding: "0",
					// border:"1px solid red",
					color: "#c8a680"
				},
				// 资金规模
				capitalScale: [{
						name: '5000USDT',
						disabled: false
					},
					{
						name: '10000USDT',
						disabled: false
					},
					{
						name: '20000USDT',
						disabled: false
					},
					{
						name: '30000USDT',
						disabled: false
					},
					{
						name: '40000USDT',
						disabled: false
					},
					{
						name: '50000USDT',
						disabled: false
					},
				],
				timeList: [{
						name: '128USTD/月 4.3U/天',
						disabled: false
					},
					{
						name: '2888USTD/月 3.2U/天',
						disabled: false
					}
				]

			};
		},
		components:{
			kefuPopup
		},
		methods: {
			copyKefu(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '已复制',
							duration: 3000
						})
					}
				});
			},
			marketCallback(index) {
				this.form.market = this.marketList[index].text;
			},
			// 资金规模
			radioGroupChange(e) {
				console.log(e);
			},
			// 充值模态框
			submit() {
				this.show = true;
			},
			confirm() {
				console.log('confirm')
			},
			cancel() {
				console.log('cancel')
			},
			// 切换市场
			changeCate(index) {
				this.currentCate = index;
			},
			// 展示客服
			showKeFu() {
				this.showKefu = true
				console.log('showKefu', this.showKefu)
			},
			closePopup(c){
				this.showKefu = c
				console.log('closePopup', this.showKefu)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		padding: 20rpx 0;
		background-color: #212226;
		font-size: 24rpx;
		color: #c8a680;
		.weui-form {
			padding: 0;
			background-color: #212226;

			.weui-form__control-area {
				margin: 0;
				padding: 10px;

				.noticeCate {
					font-size: 24rpx;
				}
			}
		}
		.form {
			padding: 0 25rpx;
		}

		.u-form-item--left {
			flex: 3
		}

		.u-form-item--right {
			flex: 4;
		}

		.radio-list {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;
			margin-left: 35rpx;

			.radio {}
		}
		// 充值类型
		.charge-method {
			display: flex;
			width: 700rpx;
			height: 100rpx;
			border-bottom: 2px solid #2e3136;
			
			justify-content: space-between;
			align-items: center;
			.left {
				color: #534b3f;
			}
			.right {

			}
		}

		// 充值时间
		.charge-time {
			display: flex;
			min-width: 720rpx;
			margin: 10rpx auto;
			justify-content: space-between;
			flex-wrap:wrap;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				border: 4rpx solid #2e3136;
				box-shadow: 1rpx 2rpx 4rpx #2e3136;
				min-width: 222rpx;
				min-height: 262rpx;
				margin-right: 14rpx;
				color: #c3a77f;
				&.selected {
					background-color: #303134;
				}
				.time {
					margin-top: 30rpx;
				}
				.name {
					font-size: 40rpx;
					font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
				}
				.money {
					font-size: 50rpx;
					font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
					text {
						font-size: 30rpx;
					}
				}
				.desc {
					margin-bottom: 30rpx;
				}
			}
		}


		// 充值底部
		.charge-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-between;
			border-top:4px solid #2e3136;
			.left {
				flex: 7;
				display: inline-flex;
				display: flex;
				padding: 18rpx;
				align-items: center;
		
				.title {
					font-family: Microsoft YaHei;
					font-size: 34rpx;
				}
				.money {
					margin-left: 10rpx;
					margin-right: 3rpx;
					margin-top: 5rpx;
					font-size: 30rpx;
				}
				.unit {
					margin-top: 14rpx;
					font-size: 22rpx;
				}
			}
			.right {
				flex: 4;
				width: 260rpx;
				height: 100rpx;
				background-color: #c8a680;
				color: #60492c;
				font-weight: 600;
				text-align: center;
				line-height: 100rpx;

			}
		}

		// 充值弹窗
		.charge {
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			border-radius: 10rpx;

			.item {
				color: #696c89;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				&.btn {
					margin: 0 auto;
				}
			}

			.u-btn {
				margin: 20rpx 0;
			}
		}
	}
</style>
